<template>
	<view :_autoFun="autoFun">
		<view class="update" v-if="is_update">
			<view class="upbg-image">
				<u-image src="/static/images/index/update_apk.png"></u-image>
			</view>
			<view class="update-box">
				
				<view class="up-info">
					<view class="up-title">
						<view>发现新版本</view>
						<view>V<text>{{from.app_version}}</text></view>
					</view>
					<view class="up-content">
						<text>{{ from.app_up_content}}</text>
					</view>
				</view>
				<view class="btn-box" v-if="is_download === false">
					<button type="default" class="up-btn btn-cancel" :class="baseForm"
						@click="cancelUpdate">暂不更新</button>
					<button type="default" class="up-btn btn-confirm" :class="baseForm"
						@click="confirmUpdate">立即更新</button>
				</view>
				<view class="btn-box" v-else-if="is_download === true">
					<view class="progress-box" v-if="is_fail == false">
						<view class="progress-text">
							正在下载中：{{progress}} %
						</view>
						<view class="uni-padding-wrap uni-common-mt progress">
							<view class="progress-box">
								<progress :percent="progress" backgroundColor="#e3e3e3" stroke-width="4" />
							</view>
						</view>
					</view>
					<view v-else>
						<view class="progress-text red">
                           <u-button class="btn" type="primary" @click="ppolci"> 安装失败，需重新下载APP</u-button>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "vupdate",
		props: {
			from: {
				type: Object,
				default: {
					app_is_update: 0,
					app_upbg_image: '',
					app_wgt_file: '',
					app_version: '',
					app_up_content: '',
				}
			},
		},
		data() {
			return {
				baseForm: 'shop',
				progress: 0,
				is_download: false,
				is_update: false,
				is_fail: false,
			};
		},
		computed: {
			autoFun() {
				this.update();
			},
			appUpContent() {
				if (this.app_up_content) {
					console.log('this.app_up_content.split("\n")', this.app_up_content.split("\n"))
					return this.app_up_content.split("\n")
					
				}
				return []
			}
		},
		methods: {
            ppolci(){
            	let setting = uni.getStorageSync('self_config');
            	if (setting) {
            		window.location.href = setting.android_download_url;
            	}
            	
            },
			cancelUpdate: function() {
				this.is_update = false
				if (this.from.app_is_update == 1) {
					if (plus.os.name.toLowerCase() === 'android') {
						plus.runtime.quit();
					} else {
						const threadClass = plus.ios.importClass("NSThread");
						const mainThread = plus.ios.invoke(threadClass, "mainThread");
						plus.ios.invoke(mainThread, "exit");
					}
				}
			},
			confirmUpdate: function() {
				// #ifdef APP-PLUS
				let _this = this;
				_this.is_download = true;
				const downloadTask = uni.downloadFile({
					url: _this.from.app_wgt_file, // 下载资源的 url
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							/* 安装应用, 要安装的文件路径(downloadResult.tempFilePath)
							force 是否强制安装
							true表示强制安装，不进行版本号的校验；false则需要版本号校验，
							如果将要安装应用的版本号不高                
							于现有应用的版本号则终止安装，并返回安装失败。 仅安装wgt和wgtu时生效，默认值 false。
							*/
							plus.runtime.install(downloadResult.tempFilePath, {
								force: true
							}, function() {
								uni.showModal({
									title: '提示',
									content: '更新完成，立即重启',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											plus.runtime.restart();
											console.log('安装成功', 'install success...');
										}
									}
								});

								// 应用热重启，重新启动进入首页。
							}, function(e) {
								const eStr = JSON.stringify(e)
								_this.is_fail = true
                                uni.showToast({
                                    title: '安装失败，需重新下载APP',
                                    duration: 2000,
                                    icon: 'none'
                                })
								// uni.showToast({
								// 	title: `更新失败，请关闭app重试2--${eStr}`,
								// 	duration: 2000,
								// 	icon: 'none'
								// });
								return false;
							});
						} else {
							_this.is_fail = true
							uni.showToast({
								title: '更新失败，请关闭app重试',
								duration: 2000,
								icon: 'none'
							});
							return false;
						}
					}
				});

				downloadTask.onProgressUpdate((res) => {
					console.log("onProgressUpdate", res.progress)
					_this.progress = res.progress

					// console.log('下载进度' + );
					// console.log('已经下载的数据长度' + res.totalBytesWritten);
					// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);

					// 测试条件，取消下载任务。

				});
				// #endif
			},
			// 需要更新时，mainfest中的版本需要低于后台设置的版本
			update: function() {
				// #ifdef APP-PLUS
				let _this = this
				if (_this.from.app_version) {
					plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
						console.log("_this.from.app_version", _this.from.app_version)
						console.log("widgetInfo.version", widgetInfo.version)
						if (_this.from.app_version != widgetInfo.version && _this.from.app_wgt_file) {
							_this.is_update = true
						}
					});
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.update {
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		z-index: 1000;
	}
	.upbg-image {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 80%;
		transform: translate(-50%, -60%);
		background-color: #ff8200;
		height: 200rpx;
		text-align: center;
		border-radius: 20rpx;
		padding: 40rpx 40rpx;
	}
	.update-box {
		position: absolute;
		transform: translate(-50%, -60%);
		top: 50%;
		left: 50%;
		width: 80%;
		background-color: #fff;
		/* height: 60%; */
		text-align: center;
		border-radius: 20rpx;
		padding: 40rpx 40rpx;
		background: url("../../static/images/index/update_apk.png") no-repeat;
		background-size: 100%;
		padding-top: 150rpx
	}

	.btn-box {
		display: flex;
		justify-content: space-around;
		
		.up-btn {
			width: 43%;
			line-height: 70rpx;
			// height: 35px;
			// line-height: 35px;

			font-size: 30rpx;
		}

		// .up-btn.basebForm{
		// 	border: 1rpx solid $base-color;
		// }
		// .up-btn.baseForm{
		// 	border: 1rpx solid $base-color;
		// }

		// .btn-cancel.basebForm{
		// 	color: $base-color;
		// }
		// .btn-cancel.baseForm{
		// 	color: $base-color;
		// }
		// .btn-confirm.basebForm{
		// 	background-color: $base-color;
		// 	color: #fff;
		// }
		// .btn-confirm.baseForm{
		// 	background-color: $base-color;
		// 	color: #fff;
		// }
		.up-btn:after {
			display: none;
		}
		.btn-confirm {
			color: #000000;
			background-color: #ff8200;
		}
	}

	.up-img-box {
		width: 100%;
		text-align: center;
		height: 400rpx;
		

		.up-img {
			width: 520rpx;
			height: 400rpx;
		}
	}

	.up-info {
		margin: 20rpx 0;
		
		.up-title {
			font-size: 40rpx;
			font-weight: 600;
			height: 200rpx;
			// background: url("../../static/images/index/update_apk.png");
			background-size: 100%;
			text-align: left;
			margin-left: 20rpx;
		}

		.up-content {
			line-height: 50rpx;
			padding: 30rpx 40rpx;
			text-align: left;
		}
	}

	.progress-box {
		width: 100%;
	}

	.progress-text {
		font-size: 32rpx;
	}

	.progress {
		margin-top: 30rpx;
	}
</style>